<template>
  <div class="">
    <Form :label-width="105">
      <FormItem label="ID">
        <i-input size="small" v-model="id" readonly>
          <Button title="复制" slot="append" v-clipboard="idClipOptions"><Icon type="md-copy" /></Button>
        </i-input>
      </FormItem>
      <FormItem label="组名称">
        <Input size="small" v-model="name"/>
      </FormItem>

      <FormItem label="宽度">
        <InputNumber size="small" :max="50000" :min="1" v-model="width" disabled></InputNumber> px
      </FormItem>
      <FormItem label="高度">
        <InputNumber size="small" :max="50000" :min="1" v-model="height" disabled></InputNumber> px
      </FormItem>
      <FormItem label="左偏移">
        <InputNumber size="small" :max="50000" :min="-50000" :step="1" v-model="left" disabled></InputNumber> px
      </FormItem>
      <FormItem label="上偏移">
        <InputNumber size="small" :max="50000" :min="-50000" :step="1" v-model="top" disabled></InputNumber> px
      </FormItem>

      <FormItem label="允许拖拽">
        <i-switch v-model="draggable">
          <span slot="open"></span>
          <span slot="close"></span>
        </i-switch>
      </FormItem>
      <FormItem label="显示">
        <i-switch v-model="display" :true-value="'block'" :false-value="'none'">
          <span slot="open"></span>
          <span slot="close"></span>
        </i-switch>
      </FormItem>

      <FormItemPanel title="组内元素过渡动画">
        <FormItem label="启用">
          <i-switch v-model="animationVisible">
            <span slot="open"></span>
            <span slot="close"></span>
          </i-switch>
        </FormItem>
        <FormItem label="延时时间">
          <Select transfer size="small" v-model="animationDelay" clearable>
            <Option v-for="item in $PnDict.animationDelayClass" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="进场动画">
          <Select transfer size="small" v-model="inAnimation" clearable>
            <Option v-for="item in $PnDict.inAnimations" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="出场动画">
          <Select transfer size="small" v-model="outAnimation" clearable>
            <Option v-for="item in $PnDict.outAnimations" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem >
          <Button size="small" type="primary" @click="submitAnimationSetting">提交配置</Button>
        </FormItem>
      </FormItemPanel>
    </Form>
  </div>
</template>

<script>

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getGroupItem',
    mutationType: 'designer/updateGroupItem',
  });

  export default {
    name: 'AbsoluteGroupItemForm',
    data() {
      return {

      }
    },
    mounted() {

    },
    methods: {

      submitAnimationSetting () {
        this.$Modal.confirm({
          title: '提醒',
          content: '确定提交此配置吗？（此操作将会覆盖组内所有布局块的过渡动画配置）',
          onOk: () => {
            this.layoutItemIds.forEach(layoutItemId => {
              this.$store.commit('designer/setLayoutItemAnimationSetting', {
                id: layoutItemId,
                animationVisible: this.animationVisible,
                animationDelay: this.animationDelay,
                inAnimation: this.inAnimation,
                outAnimation: this.outAnimation
              })
            })
          }
        });
      }

    },
    computed: {
      ...mapFields({
        id: 'id',
        name: 'name',
        draggable: 'groupItemConfigData.draggable',

        layoutItemIds: 'layoutItemIds',

        animationVisible: 'groupItemConfigData.animationVisible',
        animationDelay: 'groupItemConfigData.animationDelay',
        inAnimation: 'groupItemConfigData.inAnimation',
        outAnimation: 'groupItemConfigData.outAnimation',

        width: 'groupItemConfigData.width',
        height: 'groupItemConfigData.height',
        left: 'groupItemConfigData.left',
        top: 'groupItemConfigData.top',

        display: 'groupItemConfigData.display',
      }),
      idClipOptions () {
        return {
          value: this.id,
          success: () => {
            this.$Message.success('复制成功')
          },
          error: () => {
            this.$Message.error('复制失败')
          }
        }
      },
    },
    watch: {
      draggable: {
        handler: function (val) {
          let tmpGroupItem = this.$store.getters['designer/getLayoutGroupItemById'](this.id);
          tmpGroupItem.layoutItemIds.forEach(layoutItemId => {
            this.$store.commit('designer/setLayoutItemDraggableEnabled', {id: layoutItemId, draggableEnabled: val})
          })
        }
      },
      display: {
        handler: function (val) {
          let tmpGroupItem = this.$store.getters['designer/getLayoutGroupItemById'](this.id);
          tmpGroupItem.layoutItemIds.forEach(id => {
            this.$store.commit('designer/setLayoutItemDisplay', {id: id, display: val})
          });
        }
      }
    }
  }
</script>

<style scoped>
  .ivu-form-item {
    margin-bottom: 0px;
  }
</style>
